<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZMJJZZ集卡积分统计系统</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="card-score-container">
        <h1>ZMJJZZ集卡积分统计系统</h1>
        
        <div class="version-selector">
            <label for="cardVersion">选择卡牌版本：</label>
            <select id="cardVersion">
                <option value="version2">哪吒电影豪华版收藏卡 第二弹</option>
                <option value="version1">哪吒电影豪华版收藏卡 第一弹</option>
            </select>
        </div>
        
        <div class="score-summary">
            <div class="total-score">
                <span>总积分：</span>
                <span id="totalScore">0</span>
            </div>
            <div class="card-count">
                <span>总卡数：</span>
                <span id="totalCards">0</span>
            </div>
        </div>
        
        <div class="card-input-section">
            <div class="card-type-selector">
                <label for="cardType">卡牌类型：</label>
                <select id="cardType">
                    <!-- 动态生成选项 -->
                </select>
            </div>
            
            <div class="quantity-input">
                <label for="quantity">数量：</label>
                <input type="number" id="quantity" min="1" value="1">
            </div>
            
            <button id="addCard">添加卡牌</button>
        </div>
        
        <div class="card-list">
            <h2>已添加卡牌</h2>
            <table id="cardTable">
                <thead>
                    <tr>
                        <th>卡牌类型</th>
                        <th>单卡积分</th>
                        <th>数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 动态添加卡牌记录 -->
                </tbody>
            </table>
        </div>
        
        <div class="score-breakdown">
            <h2>积分明细</h2>
            <div id="scoreDetails">
                <!-- 动态生成积分明细 -->
            </div>
        </div>
    </div>

    <audio id="ringSound" src="video/ding.mp3" preload="auto"></audio>

    <script src="js/main.js"></script>
</body>
</html>